<div class="demo">
    <div style="margin-left: @($"{ButtonWidth}px"); white-space: nowrap;">
        <Popconfirm Placement="@Placement.TopLeft" Title="@_title" OnConfirm="Confirm">
            <Button>TL</Button>
        </Popconfirm>
        <Popconfirm Placement="@Placement.Top" Title="@_title" OnConfirm="Confirm">
            <Button>Top</Button>
        </Popconfirm>
        <Popconfirm Placement="@Placement.TopRight" Title="@_title" OnConfirm="Confirm">
            <Button>TR</Button>
        </Popconfirm>
    </div>
    <div style="width: @($"{ButtonWidth}px"); float: left;">
        <Popconfirm Placement="@Placement.LeftTop" Title="@_title" OnConfirm="Confirm">
            <Button>LT</Button>
        </Popconfirm>
        <Popconfirm Placement="@Placement.Left" Title="@_title" OnConfirm="Confirm">
            <Button>Left</Button>
        </Popconfirm>
        <Popconfirm Placement="@Placement.LeftBottom" Title="@_title" OnConfirm="Confirm">
            <Button>LB</Button>
        </Popconfirm>
    </div>
    <div style="width: @($"{ButtonWidth}px"); margin-left: @($"{ButtonWidth * 4 + 24}px");">
        <Popconfirm Placement="@Placement.RightTop" Title="@_title" OnConfirm="Confirm">
            <Button>RT</Button>
        </Popconfirm>
        <Popconfirm Placement="@Placement.Right" Title="@_title" OnConfirm="Confirm">
            <Button>Right</Button>
        </Popconfirm>
        <Popconfirm Placement="@Placement.RightBottom" Title="@_title" OnConfirm="Confirm">
            <Button>RB</Button>
        </Popconfirm>
    </div>
    <div style="margin-left: @($"{ButtonWidth}px"); clear: both; white-space: nowrap;">
        <Popconfirm Placement="@Placement.BottomLeft" Title="@_title" OnConfirm="Confirm">
            <Button>BL</Button>
        </Popconfirm>
        <Popconfirm Placement="@Placement.Bottom" Title="@_title" OnConfirm="Confirm">
            <Button>Bottom</Button>
        </Popconfirm>
        <Popconfirm Placement="@Placement.BottomRight" Title="@_title" OnConfirm="Confirm">
            <Button>BR</Button>
        </Popconfirm>
    </div>
</div>

@inject IMessageService _message

@code
{
    const int ButtonWidth = 70;

    private string _title = "Are you sure to delete this task?";
    private void Confirm()
    {
        _message.Info("Clicked on Yes");
    }
}